<script setup lang="ts">
import { useConsultStore } from '@/stores'

// 返回上一级
const onClickLeft = () => history.back()

const stores = useConsultStore()
</script>

<template>
  <div class="consult-fast-page">
    <!-- 导航区域 -->
    <van-nav-bar
      title="极速问诊"
      left-text="返回"
      right-text="问诊记录"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- logo区域 -->
    <div class="fast-logo">
      <img src="@/assets/consult-fast.png" alt="" />
      <p class="text"><span>20s</span>医生极速回复</p>
    </div>
    <!-- 问诊区域 -->
    <div class="fast-type">
      <router-link
        to="/consult/dep"
        class="item"
        @click="stores.setIllnessType(0)"
      >
        <cp-icon class="pic" name="consult-doctor"></cp-icon>
        <div class="item-info">
          <p>三甲图文问诊</p>
          <p>三甲主治及以上级别医生</p>
        </div>
        <van-icon name="arrow"></van-icon>
      </router-link>
      <router-link
        to="/consult/dep"
        class="item"
        @click="stores.setIllnessType(1)"
      >
        <cp-icon class="pic" name="consult-message"></cp-icon>
        <div class="item-info">
          <p>普通图文问诊</p>
          <p>二甲主治及以上级别医生</p>
        </div>
        <van-icon name="arrow"></van-icon>
      </router-link>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fast-logo {
  padding: 30px 0;
  text-align: center;
  img {
    width: 240px;
  }
  .text {
    font-size: 16px;
    margin-top: 10px;
    > span {
      margin-right: 5px;
      color: var(--cp-primary);
    }
  }
}
.fast-type {
  padding: 15px;
  .item {
    display: flex;
    position: relative;
    padding: 16px;
    border-radius: 4px;
    align-items: center;
    margin-bottom: 16px;
    border: 0.5px solid var(--cp-line);
    .pic {
      width: 40px;
      height: 40px;
    }
    .item-info {
      margin-left: 12px;
      > p:first-child {
        font-size: 16px;
        color: var(--cp-text1);
        margin-bottom: 4px;
      }
      > p:last-child {
        font-size: 13px;
        color: var(--cp-tag);
      }
    }
    .van-icon {
      position: absolute;
      right: 10px;
      font-size: 20px;
      color: var(--cp-tip);
    }
  }
}
</style>
